<!-- 首页 -->
<template>
	<!-- 背景图片 -->
	<view class="page" :style="{background:'url(' + bgUrl + ') no-repeat'}">
		<u-navbar :border-bottom="false" title="金麦穗商城"
			title-style="padding-top: 30rpx;color: #00aa00;font-size: 42rpx;font-weight: 700;" placeholder
			:bgColor="bgColor">
			<view slot="left">

			</view>
		</u-navbar>
		<!-- 	<view class="mt-2 px-2">
			<u-search placeholder="请输入要搜索的商品" v-model="keyword" @change="getindexGoods" :show-action="false"></u-search>
		</view> -->
		<u-swiper :list="dataInfo.banner.index" keyName="image" showTitle indicator indicatorMode="dot" height="1300rpx"
			radius="0" imgMode="widthFix"></u-swiper>

		<!-- 富文本广告 -->
		<view class="mt-2">
			<u-parse :content="dataInfo.content_first"></u-parse>
		</view>

		<view class="mt-2">
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(item, index) in dataInfo.goods_category" :key="index"
					@click="categoryItem(item,index)">
					<view class="p-2 flex-column align-center justify-center">
						<view class="flex align-center justify-center">
							<u-image :src="item.image" width="112rpx" height="119rpx" radius="16"></u-image>
						</view>
						<view class="font-30 mt-2 flex align-center justify-center">{{item.name}}</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>

		<!-- 商品筛选模式 -->
		<!-- <view class="flex align-center mt-2">
			<view class="flex align-center justify-center w-50 py-2" v-for="(item,index) in types" :key="index" @click="changeType(index)">
				<view class="flex align-center justify-center font-30" :class="current===index?'active':''">
					{{item}}
				</view>
				<view class="" v-if="index===1" >
					<u-icon name="arrow-up-fill" size="2rpx" :color="isup?'#92c392':'#d6d8d7'" style="margin-bottom: 10rpx;"></u-icon>
					<u-icon name="arrow-down-fill" :color="!isup?'#92c392':'#d6d8d7'" size="2rpx"></u-icon>
				</view>
			</view>
		</view> -->
		<!-- 热销推荐 -->
		<view class="px-2 mb-2">
			<view class="hot-view-title">热销推荐</view>
		</view>
		<image class="ad-view-image" :src="hotImage" mode=""></image>
		<!-- 热销商品 -->
		<view class="flex justify-between" style="flex-wrap: wrap;margin:0 30rpx;">
			<block v-for="(item,index) in list" :key="index">
				<commonItem :item="item" :color="'#f25204'"></commonItem>
			</block>
		</view>
		<!-- 和牛系列 -->
		<view class="tabs-view">
			<u-tabs :list="classifyList" @click="chooseTabs" lineColor="#008F3D"
			:activeStyle="{color: '#008F3D',fontWeight: 'bold',transform: 'scale(1.05)'}"></u-tabs>
			<view class="px-2 mb-3 mt-3">
				<view class="hot-view-title">{{secondClassName}}</view>
			</view>
		</view>
		
		<image class="ad-view-image" :src="heniuImage" mode=""></image>
		<!-- <u-tabs :list="indexTabsList" @click="click"></u-tabs> -->
		<view class="flex justify-between" style="flex-wrap: wrap;margin:0 30rpx;">
			<block v-for="(item,index) in secondClassList" :key="index">
				<commonItem :item="item" :color="'#f25204'"></commonItem>
			</block>
		</view>
		<u-empty
		v-if="secondClassList.length==0"
		        mode="list"
		        icon="http://cdn.uviewui.com/uview/empty/list.png"
				text='暂无商品'
		>
		</u-empty>
		<view class="flex align-center justify-center mt-5">
			<view class="goto-classify" @click="goToswb('/pages/classify/index')">查看全部 ></view>
		</view>
		<view class="p-2 mt-2 mb-2">
			<view class="hot-view-title">省钱券包 优惠看得见</view>
		</view>

		<view class="px-2">
			<view class="coupon-view mb-3" v-for="(item,index) in couponList" :key="index">
				<view class="coupon-view-left">
					<text style="font-size: 30px;color: #F26D72;margin-right: 10rpx;">{{item.money}}</text>
					<text style="font-size: 13px;color: #333333;">元</text>
				</view>
				<view class="">
					<view style="font-size: 15px;margin-bottom: 10rpx;">{{item.title}}</view>
					<view style="font-size: 13px;color: #999999;margin-bottom: 10rpx;">
						满{{item.max_money}}元减{{item.money}}元
					</view>
					<view style="font-size: 13px;color: #999999;margin-bottom: 10rpx;">有效期{{item.valid}}天</view>
					<!-- <view style="font-size: 13px;color: #999999;">全平台可用</view> -->
				</view>
				<view class="coupon-view-btn" @click="getCoupop(item.id)">点击领取</view>
			</view>
			<u-empty v-if="couponList.length == 0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"
				width="150px" height="150px" text="列表为空" textSize="18">
			</u-empty>
			<view style="font-size: 13px;color: #999999;text-align: center;margin: 30rpx 0;"
				@click="goToUrl('/pages/index/coupon-center')">前往 <text style="color: #008F3D;"> 领券中心 </text> 获取更多优惠 >
			</view>
		</view>
		<!-- 富文本广告 -->
		<view class="mt-2">
			<u-parse :content="dataInfo.content_second"></u-parse>
		</view>
		<!-- 关于我们 -->
		<view class="px-2 mt-3 mb-3">
			<view class="hot-view-title">关于我们</view>
		</view>
		<view class="about-me"  @click="goToswb('/pages/news/news')">
			<image class="about-me-image" :src="aboutImage" mode=""></image>
			<view class="about-me-title">了解更多 >></view>
		</view>

		<!-- 加载完状态 -->
		<!-- <view class="flex align-center justify-center my-2">
			<u-loadmore :status="status" color="#ccc" nomore-text="~没有更多~" fontSize="15"></u-loadmore>
		</view> -->

		<u-toast ref="uToast"></u-toast>

	</view>
</template>

<script>
	import {
		base
	} from '@/request/env.js'
	export default {
		data() {
			return {
				current: 0,
				dataInfo: {},
				page: 1, //页数
				types: ['综合', '价格'],
				list: [],
				priceorder: 0,
				status: 'nomore',
				isFinish: true,
				isup: true, //从低到高
				bgUrl: '',
				bgColor: 'transparent',
				searchKey: '',
				limit: 10, // 每页条数
				user_info: {
					'invite_code': ''
				},
				keyword: "",
				content: `
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
				`,
				indexTabsList: [{
					name: '',
					name: ''
				}],
				couponList: [],
				hotImage:'',
				heniuImage:'',
				aboutImage:'',
				classifyList:[],
				secondClassId:'',
				secondClassName:'',
				secondClassList:[]
			}
		},
		onPageScroll(res) {
			this.bgColor = res.scrollTop > 20 ? '#fff' : 'transparent'
		},

		onLoad(options) {
			this.bgUrl = base + '/image/hard.png'
			let invite_code = '';
			if (options && options.invite_code) {
				invite_code = options.invite_code
			}
			//获取来源
			if (options && options.scene) {
				//params转 obj  字符串参数  a=123&b=456 转 {a:"123",b:"456"}
				var query = this.getRequestParameters(decodeURIComponent(options.scene))
				invite_code = query.invite_code
			}
			if (invite_code) {
				uni.setStorageSync('invite_code', invite_code)
			}
		},
		onShow() {
			//uni.hideLoading()
			let user_info = uni.getStorageSync('userinfo')
			if (user_info) {
				this.user_info = user_info
			}
			this.page = 1
			this.getData()
			this.getindexGoods()
			this.CouponList()
			this.getClassify()
		},
		// //转发给朋友
		// onShareAppMessage(res) {
		// 	return {
		// 		title: '五金商城',
		// 		path: 'pages/index/index?invite_code=' + this.user_info.invite_code
		// 	}
		// },
		// //分享朋友圈
		// onShareTimeline(res) {
		// 	return {
		// 		title: '五金商城',
		// 		path: 'pages/index/index',
		// 		query: 'invite_code=' + this.user_info.invite_code,
		// 	}
		// },
		// 获取商品列表
		// onReachBottom() {
		// 	if (!this.isFinish) {
		// 		return;
		// 	}
		// 	this.page = this.page + 1
		// 	this.status = 'loading';
		// 	this.$api.indexGoods({
		// 		page: this.page,
		// 		price_order: this.priceorder,
		// 		limit: this.limit,
		// 		keyword: this.keyword,
		// 	}).then(res => {
		// 		if (res.code === 1) {
		// 			this.list = [...this.list, ...res.data]
		// 			if (res.data.length <= this.limit) {
		// 				this.status = 'nomore'
		// 				this.isFinish = false
		// 			} else {
		// 				this.status = 'loadmore'
		// 			}
		// 		}
		// 	})

		// },
		methods: {
			// 获取二级分类商品
			getClassifiedGoods(id){
				let form = {
					cate_id:id,
					page:1,
					limit:10
				}
				this.$api.classifiedGoods(form).then(res=>{
					console.log(res)
					if (res.code === 1) {
						 this.secondClassList = res.data.slice(0, 4)
					}
				})
			},
			// 选择一级分类
			chooseTabs(e){
				console.log(e)
				this.secondClassName = ''
				this.secondClassList = []
				this.getCategoryReclassify(e.id)
				// this.secondClassId = e.id
				// this.secondClassName = e.name
			},
			// 获取二级分类
			getCategoryReclassify(id){
				this.$api.categoryReclassify({cate_id:id}).then(res=>{
					// this.list1 = res.data
					this.secondClassName = res.data[0].name
					this.getClassifiedGoods(res.data[0].id)
				})
			},
			// 获取一级分类
			getClassify() {
				this.$api.categoryIndex().then(res => {
					console.log(res)
					this.classifyList = res.data
					this.getCategoryReclassify(res.data[0].id)
				})
			},
			// 点击领取优惠卷
			getCoupop(id){
				this.$api.couponReceive({coupon_id:id}).then(res=>{
					if(res.code ==1){
						uni.showToast({
							title:'领取成功',
							icon:'none'
						})
					}
				})
			},
			// 获取优惠卷
			CouponList() {
				let parmar = {
					page: 1,
					limit: 10,
				}
				this.$api.getCouponList(parmar).then(res => {
					if (res.code === 1) {
						this.couponList = res.data.data.slice(0, 2)
						console.log(this.list)
					}
				})
			},
			goToUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			goToswb(url) {
				uni.switchTab({
					url: url
				})
			},
			getRequestParameters(params = "") {
				let theRequest = new Object();
				if (params != undefined) {
					let strs = params.split("&");
					for (let i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
					}
				}
				return theRequest;
			},
			getData() {
				this.$api.index().then(res => {
					if (res.code === 1) {
						this.dataInfo = res.data
						this.hotImage = this.dataInfo.banner.hot[0].image
						this.heniuImage = this.dataInfo.banner.heniu[0].image
						this.aboutImage = this.dataInfo.banner.about[0].image
					}
				})
			},
			getindexGoods() {
				let parmar = {
					page: this.page,
					price_order: this.priceorder,
					limit: this.limit,
					search: this.keyword,
				}
				this.$api.indexGoods(parmar).then(res => {
					if (res.code === 1) {
						if (res.data.length > 3) {
							this.list = res.data.slice(0, 4)
							console.log(this.list)
						} else {
							this.list = res.data
						}
					}
				})
			},
			changeType(index) {
				if (index === 0) {
					this.priceorder = 0
				} else {
					this.isup = !this.isup
					this.priceorder = this.isup ? 2 : 1
				}
				this.current = index
				this.getindexGoods()
			},
			categoryItem(item, index) {
				uni.$u.route('pages/index/category', {
					name: item.name,
					cateId: item.id
				})
			},
			search() {
				if (this.searchKey === '') {
					return uni.showToast({
						title: '关键词不能为空',
						icon: 'none'
					});
				}
				uni.$u.route('pages/index/searchList', {
					keyword: this.searchKey
				})
			}

		}
	}
</script>

<style lang="scss">
	.goto-classify{
		width: 180rpx;
		height: 60rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #008F3D;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		border: 1rpx solid #DBDBDB;
	}
	.tabs-view {
		background-color: #ffffff;
		padding: 30rpx;
		margin-top: 30rpx;
	}
	.about-me-title{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 1000;
		font-size: 16px;
		color: #FFFFFF;
	}
	.about-me-image{
		width: 100%;
		height: 100%;
		flex-shrink: 0;
	}
	.ad-view-image {
		width: 100%;
		height: 420rpx;
		flex-shrink: 0;
	}

	.about-me {
		width: 100%;
		height: 400rpx;
		// background-color: #FFFFFF;
		// background-size: 100% 100%;
		background-repeat: no-repeat;
		font-size: 15px;
		color: #999999;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 30rpx 0;
		position: relative;
	}

	.coupon-view {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}

	.coupon-view-btn {
		width: 128rpx;
		height: 50rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #008F3D;
		text-align: center;
		line-height: 50rpx;
		border-radius: 25rpx;
		border: 1rpx solid #008F3D;
	}

	.hot-view-title {
		font-size: 20px;
		color: #333;
		font-weight: bold;
		text-align: center;
		width: 100%;
	}

	page {
		// background: url(@/static/home/bg.png) no-repeat;
		background-size: 100% 100%;

		.active {
			color: #04BF79;
		}

		.search {
			width: 132rpx;
			height: 56rpx;
			background: linear-gradient(180deg, #04BF79 0%, #02BC6B 100%);
			border-radius: 138rpx 138rpx 138rpx 138rpx;
			opacity: 1;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Normal, Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
		}

		.popup-wrapper-gz {
			//background-color: #eee;
			height: 500rpx;
			width: 650rpx;
			padding-top: 60rpx;

			.gz {
				text-align: center;
				font-weight: bold;
				margin-top: 50rpx;
				font-size: 28rpx;
			}

			image {
				margin-left: 230rpx;
			}

			.getPhoneNumber {
				width: 280rpx;
				background-color: #1AAC1B;
				color: #fff;
				margin-top: 60rpx;
				letter-spacing: 5rpx;
				font-size: 30rpx;
			}
		}
	}
</style>